

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{padding:0;margin:0;list-style: none;}
			body{width: 500px;margin:150px auto;}
			ul li{background:url(img/radio.gif) no-repeat left 3px;padding-left:20px;margin-bottom:10px;}
			ul li.cur{background-position:left -17px;}
			ol li{background:url(img/duo1.png) no-repeat left 0;padding-left:25px;line-height:22px;margin-bottom:10px;}
			ol li.cur{background-image:url(img/duo2.png);}
		</style>
		<script src="../js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$('ul>li').click(function(){
					$(this).addClass("cur").siblings().removeClass("cur")
				})
				$('ol>li').click(function(){
					$(this).toggleClass('cur');

				})
				
			})
		</script>
	</head>
	<body>
		<input type="radio" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<input type="checkbox" />
		<ul>
			<li class="cur">我虽然是li 但我可以变为单选按钮</li>
			<li>我虽然是li 但我可以变为单选按钮</li>
			<li>我虽然是li 但我可以变为单选按钮</li>
			<li>我虽然是li 但我可以变为单选按钮</li>
		</ul>
		<ol>
			<li class="cur">我虽然是li 但我可以变为多选按钮</li>
			<li>我虽然是li 但我可以变为多选按钮</li>
			<li>我虽然是li 但我可以变为多选按钮</li>
			<li>我虽然是li 但我可以变为多选按钮</li>
		</ol>
	</body>
</html>
